<template>
<header id="header">
   <div class="hd-inner">
    <a href="#" class="logo">
        <img src="@/assets/images/logo@2x.png" alt="">
       </a>
       <div class="hd-nav">
            <RouterLink to="/home" href="#" class="nav-item" :class="{active:route.name == 'home'}">首页</RouterLink>
            <RouterLink to="/drill" href="#" class="nav-item" :class="{active:route.name == 'drill'}">靶场演习</RouterLink>
            <RouterLink to="" href="#" class="nav-item" >赛事中心</RouterLink>
            <RouterLink to="" href="#" class="nav-item">在线CFT</RouterLink>
            <RouterLink to="" href="#" class="nav-item">效能评估</RouterLink>
            <RouterLink to="" href="#" class="nav-item">人才培养</RouterLink>
            <RouterLink to="/person" href="#" class="nav-item" :class="{active:route.name == 'person'}">个人中心</RouterLink>
            
       </div>
       <div class="right">
        <span class="search">
            <input type="text" placeholder="WEB渗透">   
            <i class=" fa fa-search"></i>
        </span>
        <div class="no-login" v-if="!isLogin">
            <RouterLink to="/login">登录</RouterLink>
            <span class="split"></span>
            <RouterLink to="/register">注册</RouterLink>
        </div>
        <div class="ok-login" v-else>
            <span class="message"></span>
            <img class="seting"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5c5d471dca758029f8bbeec8f039e730637ca98bae5549bf7e3288e5b8940c89"
        />
        <div>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img
                    class="touxiang"
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng19ac7685b95076323c1b9bfad862bdd45556917bc43f8bcd9d1eee855b09a09a"
                  />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeUserInfo('ChangePhoto')">修改头像</el-dropdown-item>
                    <el-dropdown-item @click="changeUserInfo('ChangeNickName')">修改昵称</el-dropdown-item>
                    <el-dropdown-item @click="changeUserInfo('ChangePassWord') ">修改密码</el-dropdown-item>
                    <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
        </div>
        </div>
       </div>
   </div>
</header>

<component :is="changeFunc"  @closeModel="closeModel"></component>

</template>

<script setup >
import {ref, shallowRef} from "vue"
import { RouterLink, useRoute, } from 'vue-router'

import {storeToRefs} from "pinia"

import {useUserStore} from "@/stores/user.js"

import ChangePassWord from "@/component/ChangePassword.vue"
import ChangeNickName from "@/component/ChangeNickName.vue"
import ChangePhoto from "@/component/ChangePhoto.vue"

let  changeFunc = shallowRef(null)

const { isLogin} = storeToRefs(useUserStore())
const  {authorization, userInfo, saveAuthorization, saveUserInfo, outLogin, setUserStore} = useUserStore()

/* 修改个人信息 */
const changeUserInfo = (value) =>{
    switch(value){
        case 'ChangePassWord':
            changeFunc.value = ChangePassWord
            break
        case "ChangeNickName":
            changeFunc.value = ChangeNickName
            break
        case "ChangePhoto":
            changeFunc.value = ChangePhoto
            break
        default:
            break
    }
       
}

const closeModel = () => {
    changeFunc.value = null
}




let route = useRoute()

</script>

<style scoped lang=scss>
#header {
    display: flex;
    box-shadow: 0rem 0.025rem 0.05rem 0rem rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.hd-inner {
    max-width: 24rem;
    min-width: 12rem;
   
    display: flex;
    height: 1rem;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1.5625rem;
}
.logo{
    display: block;
    margin-right: 0.875rem;
    img {
        width: 1.95rem;
        height: 0.4625rem;
    }
}
.hd-nav {
    display: flex;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: flex-end;
    margin-right: 2rem;
}
.nav-item {
    display: flex;
    margin-right: auto;  
    font-size: 0.175rem;
    align-items: center;
    line-height: 1rem;
    flex-shrink: 0;
    margin-left: 0.35rem;
    &.active{
        color: #139DFF;
        border-bottom: 0.025rem solid #139DFF;
    }
}

.right {
    display: flex;
    align-items: center;

}
.search {
    font-size: 0.3rem;
    position: relative;
    color: #999999;
    width: 2.225rem;
    height: 0.55rem;
    margin-right: 0.5875rem;
    input {
        height: 0.55rem;
        width: 2.225rem;
        border-radius: 0.275rem;
        border: none;
        background: rgb(222, 241, 255)
    }
    .fa {
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        
      
    }
}
.no-login {
    display: flex;
    height: 1rem;
    align-items: center;
    line-height: 1rem;
    font-size: 0.25rem;
    white-space: nowrap;  /* 强制不换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    button {
        background-color: transparent;
        border: none;
    }
    &:hover {
        cursor: pointer;
    }
    
}
.login {
    width: 0.5rem;
    height: 0.35rem;
   
}
.split {
    width: 0.025rem;
    height: 0.25rem;
    margin: 0 0.15rem;
    background-color: #139DFF;

}

.ok-login {
    display: flex;
}
.message {
    height: 0.35rem;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng952c218a417e9d4705231e6ce0c4e8c1f832a792cf6e007cd2f554b7a9a69479)
      100% no-repeat;
    background-size: 100% 100%;
    width: 0.35rem;
    margin: 0.1rem 0 0 0.5875rem;
}
.seting {
    width: 0.3625rem;
    height: 0.3625rem;
    margin: 0.1rem 0 0 0.2rem;
}
.touxiang {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0.025rem 0 0 0.1875rem;
}
.password-box {
    display: flex;
    flex-direction: column;
    color: #999999;
    padding: 1rem;
    font-size: 0.35rem;
    
    .item {
        display: flex;
        align-items: center;
        height: 0.7625rem;
        margin-bottom: 0.6875rem;
        span {
            height: 0.7625rem;
            line-height:0.7625rem ;
            margin-right: 0.15rem;
        }
        input {
            border: 1px solid rgb(233, 233, 233);
            outline: none;
            margin-bottom: 0.2rem;
            width: 5.9125rem;
            height: 0.7625rem;
        }
    }

    i {
        font-size: 0.2rem;
    }

}
</style>
